<template>
  <div class="tab">
    <cateTabs @handleClick="cateClick"/>
    <template v-if="goods.length > 0">
      <div class="lists">
        <div class="list-item" v-for="item in goods" :key="item.id" @click="toDetail(item)">
          <div class="image-box">
            <img class="image" :src="item.litpic" alt>
          </div>
          <p class="name">{{item.title}}</p>
          <p class="price">￥{{item.price}}</p>
        </div>
        <div class="mb"></div>
      </div>
    </template>
    <template v-else>
      <div class="empty">
        <EmptyTips text="无商品"/>
      </div>
    </template>
  </div>
</template>

<script>
import api from "../../api";
import EmptyTips from "@/components/common/EmptyTips";
import cateTabs from "@/components/common/cateTabs";

export default {
  components: { EmptyTips, cateTabs },
  data() {
    return {
      goods: []
    };
  },
  methods: {
    cateClick(id) {
      this.loadGoods(id);
    },
    loadGoods(type) {
      api.product.goods(type, res => {
        console.log(res);
        this.goods = res.data.list;
      });
    },
    onClick(index, title) {
      this.goods = [];
      this.loadGoods(index);
    },
    toDetail(item) {
      this.$routerPush(this, `/pages/product/Detail?id=${item.id}`);
      // 重置购买数量
      this.$store.commit("reset");
    }
  },
  created() {},
  mounted() {
    this.loadGoods("0");
  }
};
</script>

<style lang="less" scoped>
.lists {
  .mb {
    width: 100%;
    height: 18vw;
    background: rgba(0, 0, 0, 0)
  }
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #f9f9f9;
  .list-item {
    background: #fff;
    width: 48vw;
    height: 70vw;
    margin-top: 1vw;
    margin-bottom: 1vw;
    .image-box {
      width: 48vw;
      height: 50vw;
      padding: 2vw;
      .image {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 2vw;
      font-size: 4vw;
    }
    .price {
      font-size: 4vw;
      color: #ff3b30;
      padding: 2vw;
    }
  }
}

.empty {
  margin-top: -50vw;
}
</style>